(function () {
    //点击后退
    let back = document.querySelector('.back')

    back.addEventListener('click', function () {
        // console.log(1)
        history.back()
    })
    // console.log(1)





    //进度条
    // console.log($('.progressBar').css('width'))
    // console.log($('.progressBar span').css('width'))
    let num = 0
    let Bnum = parseInt($('.progressBar').css('width'))
    console.log(Bnum)

    function fn() {
        num++
        // console.log(num)
        $('.progressBar span').css({
            width: num + 'px',
        })

        $('.progressBar span').html(parseInt((num / Bnum) * 100) + '%')
        $('.get').html(parseInt((num / Bnum) * 126))
        $('.lose').html(126 - parseInt((num / Bnum) * 126))
        if (num >= Bnum) {
            clearInterval(timer)
            $('.progressBar span').html("100%")

        }
    }

    let timer = setInterval(fn, 50)


    //发起导航数据
    $.ajax({
        url: 'http://chst.vip:1234/api/getbaicaijiatitle',
        success(res) {
            // console.log(res.result)
            let str = ''
            res.result.forEach(item => {
                // console.log(item)
                str += `
                <li titleId=${item.titleId}>
                ${item.title}
                </li>
                
                `
            })

            $('.nav').html(str)

        }
    })

    // 渲染刚开始的页面?\
    $.ajax({
        url: `http://chst.vip:1234/api/getbaicaijiaproduct?titleid=0`,
        success(res) {
            // console.log(res.result)
            let str = ''
            res.result.forEach(item => {
                // console.log(item)
                str += `
                <li>
                <a href="" class="all">
                    <div class="B_left">
                    ${item.productImg}
                    </div>

                    <div class="B_right">
                        <div class="title">${item.productName}</div>
                        <div class="price">
                            ${item.productPrice}
                            <del>1888.0</del>
                        </div>
                        <div class="residue">
                            <div class="progressBar">
                                <span></span>
                            </div>
                            <p class="red">已领<span class="get"></span>张/剩余<span class="lose"></span>张</p>
                        </div>
                        <div class="discount red">
                            点此领取优惠券
                        </div>

                        <div class="order">下单链接</div>



                    </div>

                </a>
        </li>

                    `
            })
            $('.content').html(str)
        }
    })



    // 根据导航点击渲染页面
    $('.nav').on('click', "li", function (e) {
        clearInterval(timer)
        timer = setInterval(fn, 50)
        let id = e.target.getAttribute('titleId')
        console.log(id)
        $.ajax({
            url: `http://chst.vip:1234/api/getbaicaijiaproduct?titleid=` + id,
            success(res) {
                console.log(res.result)
                let str = ''
                res.result.forEach(item => {
                    console.log(item)
                    str += `
                    <li>
                    <a href="" class="all">
                        <div class="B_left">
                        ${item.productImg}
                        </div>
    
                        <div class="B_right">
                            <div class="title">${item.productName}</div>
                            <div class="price">
                                ${item.productPrice}
                                <del>1888.0</del>
                            </div>
                            <div class="residue">
                                <div class="progressBar">
                                    <span></span>
                                </div>
                                <p class="red">已领<span class="get"></span>张/剩余<span class="lose"></span>张</p>
                            </div>
                            <div class="discount red">
                                点此领取优惠券
                            </div>
    
                            <div class="order">下单链接</div>
    
    
    
                        </div>
    
                    </a>
            </li>

                        `
                })
                $('.content').html(str)
            }
        })
    })


})()